<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二章JavaScript语法</title>
    <link href="index.css" rel="stylesheet"/>
</head>
<body>

<script type="text/javascript">
    /**
     * write,innerHTML,createElement,createTextNode
     * appendChild
     * 
     *
     */

    function testWrite() {
        document.write("<div><p>第一个<em>段落</em></p></div>");
        document.write("<div><p>第二个<em>段落</em></p></div>");
    }

    function testInnerHTML() {
        document.write("<div id=\"div_test\"></div>");
        var divTest = document.getElementById("div_test");
        divTest.innerHTML = "<p>第三个<em>段落</em></p>"
        divTest.innerHTML = "<p>第四个<em>段落</em></p>"
    }
    
    function testCreateElement() {
        document.write("<div id=\"div_create\"></div>");
        var divCreate = document.getElementById("div_create");
        var pCreate = document.createElement("p");
        var textCreate = document.createTextNode("第五个");
        var emCreate = document.createElement("em");
        var textEmCreate = document.createTextNode("段落");
        emCreate.appendChild(textEmCreate);
        pCreate.appendChild(textCreate);
        pCreate.appendChild(emCreate);
        divCreate.appendChild(pCreate);
    }

    window.onload = function () {
        testWrite();
        testInnerHTML();
        testCreateElement()
    };


</script>
</body>
</html>